<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 100px;
            width: 300px;
            height: 300px;
            background: url("content.webp")no-repeat fixed;
        }
        main {
            height: 100px;
            color: white;
            padding: 20px;
            background: hsla(0,0%,100%,.3);
            position: relative;
            text-align: center;
            overflow: hidden;
        }
        main::before {
            content: '';
            position: absolute;
            
            top: 0; right: 0; bottom: 0; left: 0;
            filter: blur(10px);
            background: url("content.webp")no-repeat fixed; /* 仅用于调试 */
            z-index: -1;
            margin: -20px;
        }
    </style>
</head>
<body>
    <main>
        <blockquote>
        "The only way to get rid of a temptation[...]"
        <footer>－
        <cite>
        Oscar Wilde,
        The Picture of Dorian Gray
        </cite>
        </footer>
        </blockquote>
       </main>
</body>
</html>